<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<style>

img{
    position: absolute;
    border: 50px solid #CCCCCC;
}
img:nth-of-type(1){
    left:0px;
    top:100px;
    transform: scale(0.5)  rotate(167deg) translateX(0px);
}
img:nth-of-type(2){
    left:1200px;
    top: 100px;
    transform: scale(0.5)  rotate(90deg) translateX(40px);
}
img:nth-of-type(3){
    left: 200px;
    top: 800px;
    transform: scale(0.5)  rotate(150deg) translateX(80px);
}
img:nth-of-type(4){
    left:900px;
    top: 900px;
    transform: scale(0.5)  rotate(270deg) translateX(70px);
}
img:nth-of-type(5){
    left:600px;
    top: 0px;
    transform: scale(0.6)  rotate(290deg) translateX(10px);
}
img:nth-of-type(6){
    left: 700px;
    top: 500px;
    transform: scale(0.5)  rotate(50deg) translateX(10px);
}
img:nth-of-type(7){
    left:50px;
    top: 900px;
    transform: scale(0.6)  rotate(50deg) translateX(10px);
}
img:nth-of-type(8){
    left:1000px;
    top: 20px;
    transform: scale(0.6)  rotate(50deg) translateX(100px);
}
    img:hover{
        transition: all 2s;
        transform: scale(0.8)  rotate(0deg) ;
        background:linear-gradient(90deg,#fab3b3,#ffbcb3 73%,#ffcaba);
        z-index: 2;
    }
</style>
<body>
<div>
    <a href="index.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="temp.html">作业三</a>
    <div class="box">
        <img src="img/img00.jpg" alt="">
        <img src="img/img01.jpg" alt="">
        <img src="img/img02.jpg" alt="">
        <img src="img/img03.jpg" alt="">
        <img src="img/img04.jpg" alt="">
        <img src="img/img05.jpg" alt="">
        <img src="img/img06.jpg" alt="">
        <img src="img/img07.jpg" alt="">
    </div>
</div>
</body>
</html>